﻿<html>
<head>
<meta charset="utf-8">
<title>天乐抽奖</title>

<style>
*{padding:0; margin:0;}
body{
background:url('img/bg.jpg') no-repeat;
background-size:cover;
}
.container{width:400px; height:200; position:fixed; top:50%; left:50%; margin:-100px 0 0 -200px; text-align:center; }
.result-box{ background-color:#fff; text-align:center; line-height:60px; font-size:34px;}
button{ width:200px; height:50px; line-height:50px; margin-top:30px; border:none; color:#fff; font-size:24px;}
button:focus{outline:none;}
.start{ background-color:#428bca;}
.end{ background-color:#d9534f;}
.one{
	position: fixed;
	top: 60%;
	left: 10%;
	font-size: 26px;
	color: #fff;
	width: 85%;
}
.two{
	position: fixed;
	top: 67%;
	left: 10%;
	font-size: 26px;
	color: #fff;
	width: 85%;
}
.three{
	position: fixed;
	top: 74%;
	left: 10%;
	font-size: 26px;
	color: #fff;
	width: 85%;
}
.onename,.twoname,.threename{
	font-size: 20px;
}
select{
	width: 150px;
	height: 50px;
	text-align: center;
	font-size: 28px;
	position: fixed;
	left: 30%;
	top: 50%;
	margin: -95px 0 0 -75px;
}
.title{
	width: 1000px;
	height: 100px;
	line-height: 100px;
	margin: 0 auto;
	text-align: center;
	font-size: 40px;
	color: #fff;
	margin-top: 150px;
}
.p1,.p2,.p3{
	width: 1200px;
	text-align: center;
	height: 30px;
	line-height: 30px;
	margin: 0 auto;
	color: #fff;
}
</style>

</head>
<body>
<div class="title">
	
</div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
<div class="container">
	<div class="result-box">
		0000****000
	</div><!--result-box-->
	<button class="start">开始抽奖</button>
</div><!--container-->
<select>
	<option value="3">三等奖</option>
	<option value="2">二等奖</option>
	<option value="1">一等奖</option>
</select>
<div class="one">
	<p>一等奖：<span class="onename"></span></p>
</div>
<div class="two">
	<p>二等奖：<span	 class="twoname"></span></p>
</div>
<div class="three">
	<p>三等奖：<span	 class="threename"></span></p>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	var addurl = window.location.href
	var Id = addurl.split("?")[1].split("=")[1]
	$.ajax({
		type:"post",
		url:"http://web.tl178.cn/Draw/sel_user",
		async:true,
		data:{
			community_Id:Id
		},
		success:function(Data){
		var result = JSON.parse(Data)
		var data = result["user"]		
//	var data=[02161606967, 13020266595, 13062886092, 13120856800, 13166203899, 13222286768, 13260155466, 13311859605, 13321953155, 13386035991, 13386279355, 13391041349, 13402005209, 13501955354, 13524377621, 13566884393, 13585583394, 13601652353, 13601750621, 13601957822, 13611717363, 13611808088, 13621842513, 13636608228, 13651744987, 13671548893, 13671715448, 13671743121, 13671938567, 13701612351, 13770050005, 13774415457, 13774468122, 13795220723, 13816648396, 13817074750, 13817603172, 13817864803, 13818156777, 13818478999, 13818608945, 13818676915, 13818708665, 13870620815, 13901647848, 13901757122, 13901765884, 13916054638, 13916130704, 13916230340, 13916320794, 13917046040, 13917082161, 13917376187, 13917519790, 13917822024, 13918015694, 15000239160, 15000858139, 15000863267, 15001966112, 15021654427, 15026688058, 15162775605, 15201931885, 15262790618, 15366970333, 15692116261, 15800762285, 15801777839, 15836932000, 15900711818, 15901868745, 15921081152, 15921913369, 17721460897, 18017628227, 18202119713, 18502746988, 18516214869, 18521502523, 18521531099, 18606387979, 18616988816, 18621373309, 18621607551, 18621768758, 18621831973, 18621939488, 18817373997, 18817619376, 18818010115, 18857881532, 18901731168, 18910877917, 18916172890, 18918588802, 18930362020, 18939786089, 15001963100, 15001963101, 15001963102, 15001963103, 15001963104, 15001963105, 15001963106, 15001963107, 15001963108, 15001963109, 15001963110, 15001963111, 15001963112, 15001963113, 15001963114, 15001963115, 15001963116, 15001963117, 15001963118, 15001963119, 15001963120, 15001963121, 15001963122, 15001963123, 15001963124, 15001963125, 15001963126, 15001963127, 15001963128, 15001963129, 15001963130, 15001963131, 15001963132, 15001963133, 15001963134, 15001963135, 15001963136, 15001963137, 15001963138, 15001963139, 15001963140, 15001963141, 15001963142, 15001963143, 15001963144, 15001963145, 15001963146, 15001963147, 15001963148, 15001963149, 15001963150, 15001963151, 15001963152, 15001963153, 15001963154, 15001963155, 15001963156, 15001963157, 15001963158, 15001963159, 15001963160, 15001963161, 15001963162, 15001963163, 15001963164, 15001963165, 15001963166, 15001963167, 15001963168, 15001963169, 15001963170, 15001963171, 15001963172, 15001963173, 15001963174, 15001963175, 15001963176, 15001963177, 15001963178, 15001963179, 15001963180, 15001963181, 15001963182, 15001963183, 15001963184, 15001963185, 15001963186, 15001963187, 15001963188, 15001963189, 15001963190, 15001963191, 15001963192, 15001963193, 15001963194, 15001963195, 15001963196, 15001963197, 15001963198, 15001963199, 15001963200, 15001963201, 15001963202, 15001963203, 15001963204, 15001963205, 15001963206, 15001963207, 15001963208, 15001963209, 15001963210, 15001963211, 15001963212, 15001963213, 15001963214, 15001963215, 15001963216, 15001963217, 15001963218, 15001963219, 15001963220, 15001963221, 15001963222, 15001963223, 15001963224, 15001963225, 15001963226, 15001963227, 15001963228, 15001963229, 15001963230, 15001963231, 15001963232, 15001963233, 15001963234, 15001963235, 15001963236, 15001963237, 15001963238, 15001963239, 15001963240, 15001963241, 15001963242, 15001963243, 15001963244, 15001963245, 15001963246, 15001963247, 15001963248, 15001963249, 15001963250, 15001963251, 15001963252, 15001963253, 15001963254, 15001963255, 15001963256, 15001963257, 15001963258, 15001963259, 15001963260, 15001963261, 15001963262, 15001963263, 15001963264, 15001963265, 15001963266, 15001963267, 15001963268, 15001963269, 15001963270, 15001963271, 15001963272, 15001963273, 15001963274, 15001963275, 15001963276, 15001963277, 15001963278, 15001963279, 15001963280, 15001963281, 15001963282, 15001963283, 15001963284, 15001963285, 15001963286, 15001963287, 15001963288, 15001963289, 15001963290, 15001963291, 15001963292, 15001963293];//参与人员
	//内定中奖人员
//	var initP=[13870620815, 13901647848, 13901757122];		
		var title = result["res"]["name"]
		$(".title").html(title)
		var p1Num=result["res"]["grade1_num"]; //一等奖数量	
		var p2Num=result["res"]["grade2_num"]; //二等奖数量
		var p3Num=result["res"]["grade3_num"]; //三等奖数量
		var id = result["res"]["Id"]
		$(".p1").html("一等奖："+result["res"]["grade1_text"])
		$(".p2").html("二等奖："+result["res"]["grade2_text"])
		$(".p3").html("三等奖："+result["res"]["grade3_text"])
	var p1Winner=new Array(); //一等奖中奖者
	var p2Winner=new Array(); //二等奖中奖者
	var p3Winner=new Array(); //三等奖中奖者
	var btn=true; //按钮状态未开始还是结束
	var key=0; //中奖下标
	var time=0; //定时器
	$(".start").click(function(){
			start()			
	})
	function runTime(){
		//$("button").show();
		clearInterval(time);
		time=setInterval(function(){
			trunNum()
		},10);
	}
	
	//点击按钮
	function start(){
		if(btn){
			if((p1Winner.length>=p1Num) && (p2Winner.length>=p2Num) && (p3Winner.length>=p3Num) && (data.length==0)){
				$("button").hide();
				alert('所有抽奖已结束！！！');
			}else if(($("select").val()==3) && (p3Winner.length>=p3Num)){
				alert("三等奖已抽取完毕，请选择其他奖项……");
			}else if(($("select").val()==2) && (p2Winner.length>=p2Num)){
				alert("二等奖已抽取完毕，请选择其他奖项……");
			}else if(($("select").val()==1) && (p1Winner.length>=p1Num)){
				alert("一等奖已抽取完毕，请选择其他奖项……");
			}else{
				btn=false;
				$("button").removeClass("start").addClass("end").text("结束抽奖");
				startTrun();
			}

			
		}else{
			btn=true;
			$("button").removeClass("end").addClass("start").text("开始抽奖");
			endTrun();
		}
	}

	function trunNum(){
		key=Math.floor(Math.random()*(data.length-1));
		var tel=data[key]["tel"].toString().substr(0, 3)+'****'+data[key]["tel"].toString().substr(7);
		$(".result-box").text(tel);
	}
	
	//开始转动数字
	function startTrun(){
		runTime();
	}
	//停止转动数字
	function endTrun(){
		clearInterval(time);
		if($("select").val()==3){
			$.ajax({
			type:"post",
			url:"http://web.tl178.cn/Draw/save",
			async:true,
			data:{
				Id:id,
				grade:3,
				tel:data[key]["tel"],
				community_Id:Id
			},
			success:function(data){
				console.log(data)
			}
			})
			p3Winner.push(data[key]["tel"]+" "+"&nbsp;&nbsp;&nbsp;");
			data.splice(key,1);
			console.log(p3Winner);
			$(".threename").html(p3Winner)
			console.log('总参与人员数量：'+data.length);
			
			if(data.length==0){
				$("button").hide();
				alert('所有抽奖已结束！！！');
			}
		}else if($("select").val()==2){
			$.ajax({
			type:"post",
			url:"http://web.tl178.cn/Draw/save",
			async:true,
			data:{
				Id:id,
				grade:2,
				tel:data[key]["tel"],
				community_Id:Id
			},
			success:function(data){
				console.log(data)
			}
			})
			p2Winner.push(data[key]["tel"]+" "+"&nbsp;&nbsp;&nbsp;");
			data.splice(key,1);	
			console.log(p2Winner);
			$(".twoname").html(p2Winner)
			console.log('总参与人员数量：'+data.length);
			
			if(data.length==0){
				$("button").hide();
				alert('所有抽奖已结束！！！');
			}
		}else{
			$.ajax({
			type:"post",
			url:"http://demo.tl178.cn/Draw/save",
			async:true,
			data:{
				Id:id,
				grade:1,
				tel:data[key]["tel"],
				community_Id:Id
			},
			success:function(data){
				console.log(data)
			}
			})
			p1Winner.push(data[key]["tel"]+" "+"&nbsp;&nbsp;&nbsp;");
			data.splice(key,1);	
			console.log(p1Winner);
			$(".onename").html(p1Winner)
			console.log('总参与人员数量：'+data.length);
			if(data.length==0){
				$("button").hide();
				alert('所有抽奖已结束！！！');
			}
		}
	}
},
	error:function(){
			
		}
	});
</script>


</div>
</body>
</html>

